<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			/* 选择被勾选的复选框 */
			.ck:checked {
				width: 30px;
				height: 30px;
			}
		</style>
	</head>

	<body>
		<input type="checkbox" name="" id="" class="ck" />
		<input type="checkbox" name="" id="" class="ck" />
		<input type="checkbox" name="" id="" class="ck" />
		<input type="checkbox" name="" id="" class="ck" />
		<button>查看</button>

		<script>
			const inputLists = document.querySelectorAll("input");
			const button = document.querySelector("button");
			button.addEventListener("click", () => {
				inputLists.forEach((e) => {
					e.checked = !e.checked;
				});
			});
		</script>
	</body>
</html>
